import G6 from '@antv/g6';
import React, { useState, useEffect } from 'react';
import {
  neo4j
} from '@/request/api';

const DeviceGraph = () => {
  const [List, setList] = useState({
    nodes:{
      properties:null
    }
});
  const fetchCourses = () => {
    const info = {};
    neo4j(info)
      .then((res) => {
        // setCourses(res.data)
        console.log(res, "res")
        setList(res.data)
      })
      .catch((e) => {
        console.log(e);
      });
  };
  const data = {
    // nodes:List.nodes.properties,
    nodes: [
      {
        id: '0',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '1',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '2',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '3',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '4',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '5',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '6',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '7',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '8',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '9',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '10',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '11',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '12',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '13',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '14',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '15',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '16',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '17',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '18',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '19',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '20',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '21',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '22',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '23',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '24',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '25',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '26',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '27',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '28',
        sortAttr: 3,
        sortAttr2: 'd',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '29',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '30',
        sortAttr: 2,
        sortAttr2: 'c',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '31',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '32',
        sortAttr: 1,
        sortAttr2: 'b',
        size: 0,
        style: {},
        label: ""
      },
      {
        id: '33',
        sortAttr: 0,
        sortAttr2: 'a',
        size: 0,
        style: {},
        label: ""
      },
    ],
    edges: [
      {
        source: '0',
        target: '1',

        label: 'Include',
      },
      {
        source: '0',
        target: '2',

        label: 'Include',
      },
      {
        source: '0',
        target: '3',

        label: 'Include',
      },
      {
        source: '0',
        target: '4',

        label: 'Include',
      },
      {
        source: '0',
        target: '5',

        label: 'Include',
      },
      {
        source: '0',
        target: '7',

        label: 'Include',
      },
      {
        source: '0',
        target: '8',

        label: 'Include',
      },
      {
        source: '0',
        target: '9',

        label: 'Include',
      },
      {
        source: '0',
        target: '10',
        label: 'Include',
      },
      {
        source: '0',
        target: '11',
        label: 'Include',
      },
      {
        source: '0',
        target: '13',
        label: 'Include',
      },
      {
        source: '0',
        target: '14',
        label: 'Include',
      },
      {
        source: '0',
        target: '15',
        label: 'Include',
      },
      {
        source: '0',
        target: '16',
        label: 'Include',
      },
      {
        source: '2',
        target: '3',

        label: 'Include',
      },
      {
        source: '4',
        target: '5',

        label: 'Include',
      },
      {
        source: '4',
        target: '6',

        label: 'Include',
      },
      {
        source: '5',
        target: '6',

        label: 'Include',
      },
      {
        source: '7',
        target: '13',
        label: 'Include',
      },
      {
        source: '8',
        target: '14',
        label: 'Include',
      },
      {
        source: '9',
        target: '10',
        label: 'Include',
      },
      {
        source: '10',
        target: '22',
        label: 'Include',
      },
      {
        source: '10',
        target: '14',
        label: 'Include',
      },
      {
        source: '10',
        target: '12',
        label: 'Include',
      },
      {
        source: '10',
        target: '24',
        label: 'Include',
      },
      {
        source: '10',
        target: '21',
        label: 'Include',
      },
      {
        source: '10',
        target: '20',
        label: 'Include',
      },
      {
        source: '11',
        target: '24',
        label: 'Include',
      },
      {
        source: '11',
        target: '22',
        label: 'Include',
      },
      {
        source: '11',
        target: '14',
        label: 'Include',
      },
      {
        source: '12',
        target: '13',
        label: 'Include',
      },
      {
        source: '16',
        target: '17',
        label: 'Include',
      },
      {
        source: '16',
        target: '18',
        label: 'Include',
      },
      {
        source: '16',
        target: '21',
        label: 'Include',
      },
      {
        source: '16',
        target: '22',
        label: 'Include',
      },
      {
        source: '17',
        target: '18',
        label: 'Include',
      },
      {
        source: '17',
        target: '20',
        label: 'Include',
      },
      {
        source: '18',
        target: '19',
        label: 'Include',
      },
      {
        source: '19',
        target: '20',
        label: 'Include',
      },
      {
        source: '19',
        target: '33',
        label: 'Include',
      },
      {
        source: '19',
        target: '22',
        label: 'Include',
      },
      {
        source: '19',
        target: '23',
        label: 'Include',
      },
      {
        source: '20',
        target: '21',
        label: 'Include',
      },
      {
        source: '21',
        target: '22',
        label: 'Include',
      },
      {
        source: '22',
        target: '24',
        label: 'Include',
      },
      {
        source: '22',
        target: '25',
        label: 'Include',
      },
      {
        source: '22',
        target: '26',
        label: 'Include',
      },
      {
        source: '22',
        target: '23',
        label: 'Include',
      },
      {
        source: '22',
        target: '28',
        label: 'Include',
      },
      {
        source: '22',
        target: '30',
        label: 'Include',
      },
      {
        source: '22',
        target: '31',
        label: 'Include',
      },
      {
        source: '22',
        target: '32',
        label: 'Include',
      },
      {
        source: '22',
        target: '33',
        label: 'Include',
      },
      {
        source: '23',
        target: '28',
        label: 'Include',
      },
      {
        source: '23',
        target: '27',
        label: 'Include',
      },
      {
        source: '23',
        target: '29',
        label: 'Include',
      },
      {
        source: '23',
        target: '30',
        label: 'Include',
      },
      {
        source: '23',
        target: '31',
        label: 'Include',
      },
      {
        source: '23',
        target: '33',
        label: 'Include',
      },
      {
        source: '32',
        target: '33',
        label: 'Include',
      },
    ],
  };

  const container = document.getElementById('container');
  const width = 2000;
  const height = 800;
  useEffect(() => {
    fetchCourses()

    const graph = new G6.Graph({
      container: 'container',
      width,
      height,
      modes: {
        default: ['drag-canvas', 'drag-node'],
      },
      layout: {
        type: 'radial',
        maxIteration: 1000,
        linkDistance: 200,
        preventOverlap: true,
        nodeSize: 30,
        sortBy: 'sortAttr2',
        sortStrength: 50,
      },
      animate: true,
      defaultEdge: {
        style: {
          endArrow: {
            path: 'M 0,0 L 8,4 L 8,-4 Z',
            fill: '#e2e2e2',
          },
        },
        labelCfg: {
          position: 'middle', // 设置文字在连接线中间位置
          style: {
            fill: 'black', // 文字颜色
            fontSize: 8, // 文字大小
            fontWeight: 'bold', // 字体粗细
          },
        },
      },
    });

    const colors = ['steelblue', 'green', 'pink', 'grey'];
    const colorsObj = { a: 'steelblue', b: 'green', c: 'pink', d: 'grey' };
    data.nodes.forEach((node) => {
      node.size = 30;
      node.style = {
        lineWidth: 4,
        fill: colors[node.sortAttr2] || colorsObj[node.sortAttr2],
        stroke: colors[node.sortAttr2] || colorsObj[node.sortAttr2],
      };
      node.label = node.id;
    });
    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  })
  return (
    <div id='container'> </div>
  )
};
export default DeviceGraph